<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站右侧互动信息展示</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/css/all.min.css">
    
    <style>
        :root {
            --primary: #4F46E5;
            --primary-light: #818CF8;
            --secondary: #6366F1;
            --success: #10B981;
            --warning: #F59E0B;
            --danger: #EF4444;
            --gray: #6B7280;
            --light-gray: #F3F4F6;
            --dark-gray: #374151;
            --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --radius: 10px;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #F9FAFB;
            color: #1F2937;
        }
        
        .sidebar-container {
            max-width: 350px;
            padding: 1.5rem 0;
        }
        
        .sidebar-card {
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 1.25rem;
            margin-bottom: 1.5rem;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .sidebar-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .card-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin: 0;
            color: var(--dark-gray);
        }
        
        .see-all {
            font-size: 0.85rem;
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s ease;
        }
        
        .see-all:hover {
            color: var(--secondary);
            text-decoration: underline;
        }
        
        /* 推荐关注样式 */
        .suggested-user {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .suggested-user:last-child {
            border-bottom: none;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .user-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid transparent;
            transition: border-color 0.2s ease;
        }
        
        .suggested-user:hover .user-avatar {
            border-color: var(--primary-light);
        }
        
        .user-details {
            min-width: 0;
        }
        
        .user-name {
            font-weight: 600;
            margin: 0 0 0.15rem 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .user-meta {
            font-size: 0.8rem;
            color: var(--gray);
            margin: 0;
        }
        
        .follow-btn {
            background-color: white;
            color: var(--primary);
            border: 1px solid var(--primary);
            border-radius: 20px;
            padding: 0.25rem 1rem;
            font-size: 0.85rem;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        
        .follow-btn:hover {
            background-color: var(--primary);
            color: white;
        }
        
        .follow-btn.following {
            background-color: var(--light-gray);
            color: var(--dark-gray);
            border-color: var(--light-gray);
        }
        
        .follow-btn.following:hover {
            background-color: var(--light-gray);
            color: var(--danger);
            border-color: var(--danger);
        }
        
        /* 热门话题样式 */
        .trending-topic {
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--light-gray);
            cursor: pointer;
            transition: transform 0.1s ease;
        }
        
        .trending-topic:last-child {
            border-bottom: none;
        }
        
        .trending-topic:hover {
            transform: translateX(5px);
        }
        
        .topic-category {
            font-size: 0.8rem;
            color: var(--gray);
            margin: 0 0 0.25rem 0;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .topic-title {
            font-weight: 600;
            margin: 0 0 0.25rem 0;
            color: var(--dark-gray);
        }
        
        .topic-meta {
            font-size: 0.8rem;
            color: var(--gray);
            margin: 0;
        }
        
        /* 活动提醒样式 */
        .event-item {
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .event-item:last-child {
            border-bottom: none;
        }
        
        .event-date {
            display: inline-block;
            background-color: var(--primary-light);
            color: white;
            font-weight: 600;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.8rem;
            margin-bottom: 0.5rem;
        }
        
        .event-title {
            font-weight: 600;
            margin: 0 0 0.25rem 0;
            color: var(--dark-gray);
        }
        
        .event-details {
            font-size: 0.85rem;
            color: var(--gray);
            margin: 0 0 0.5rem 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .event-details i {
            font-size: 0.9rem;
        }
        
        .join-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 4px;
            padding: 0.25rem 0.75rem;
            font-size: 0.85rem;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        
        .join-btn:hover {
            background-color: var(--secondary);
        }
        
        /* 互动动态样式 */
        .activity-item {
            display: flex;
            gap: 0.75rem;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .activity-item:last-child {
            border-bottom: none;
        }
        
        .activity-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .activity-content {
            flex: 1;
            font-size: 0.9rem;
        }
        
        .activity-text {
            margin: 0 0 0.25rem 0;
        }
        
        .activity-text a {
            color: var(--primary);
            font-weight: 500;
            text-decoration: none;
        }
        
        .activity-text a:hover {
            text-decoration: underline;
        }
        
        .activity-time {
            font-size: 0.8rem;
            color: var(--gray);
            margin: 0;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .sidebar-container {
                max-width: 100%;
                padding: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="sidebar-container ms-auto">
        <!-- 推荐关注 -->
        <div class="sidebar-card">
            <div class="card-header">
                <h3 class="card-title">推荐关注</h3>
                <a href="#" class="see-all">查看全部</a>
            </div>
            
            <div class="suggested-users">
                <div class="suggested-user">
                    <div class="user-info">
                        <img src="https://picsum.photos/id/64/48/48" alt="张晓明的头像" class="user-avatar">
                        <div class="user-details">
                            <p class="user-name">张晓明</p>
                            <p class="user-meta">产品经理 · 3个共同好友</p>
                        </div>
                    </div>
                    <button class="follow-btn">关注</button>
                </div>
                
                <div class="suggested-user">
                    <div class="user-info">
                        <img src="https://picsum.photos/id/65/48/48" alt="李婷婷的头像" class="user-avatar">
                        <div class="user-details">
                            <p class="user-name">李婷婷</p>
                            <p class="user-meta">UI设计师 · 关注了5个你关注的人</p>
                        </div>
                    </div>
                    <button class="follow-btn">关注</button>
                </div>
                
                <div class="suggested-user">
                    <div class="user-info">
                        <img src="https://picsum.photos/id/91/48/48" alt="王建国的头像" class="user-avatar">
                        <div class="user-details">
                            <p class="user-name">王建国</p>
                            <p class="user-meta">前端开发 · 经常浏览相同话题</p>
                        </div>
                    </div>
                    <button class="follow-btn">关注</button>
                </div>
                
                <div class="suggested-user">
                    <div class="user-info">
                        <img src="https://picsum.photos/id/26/48/48" alt="陈思思的头像" class="user-avatar">
                        <div class="user-details">
                            <p class="user-name">陈思思</p>
                            <p class="user-meta">内容运营 · 与你有相似兴趣</p>
                        </div>
                    </div>
                    <button class="follow-btn following">已关注</button>
                </div>
            </div>
        </div>
        
        <!-- 热门话题 -->
        <div class="sidebar-card">
            <div class="card-header">
                <h3 class="card-title">热门话题</h3>
                <a href="#" class="see-all">更多话题</a>
            </div>
            
            <div class="trending-topics">
                <div class="trending-topic">
                    <p class="topic-category"><i class="fas fa-fire"></i> 技术</p>
                    <p class="topic-title">#前端开发新趋势#</p>
                    <p class="topic-meta">3.2k 人正在讨论</p>
                </div>
                
                <div class="trending-topic">
                    <p class="topic-category"><i class="fas fa-fire"></i> 设计</p>
                    <p class="topic-title">#UI设计中的微交互#</p>
                    <p class="topic-meta">1.8k 人正在讨论</p>
                </div>
                
                <div class="trending-topic">
                    <p class="topic-category"><i class="fas fa-fire"></i> 职场</p>
                    <p class="topic-title">#远程工作效率提升技巧#</p>
                    <p class="topic-meta">5.7k 人正在讨论</p>
                </div>
                
                <div class="trending-topic">
                    <p class="topic-category"><i class="fas fa-fire"></i> 生活</p>
                    <p class="topic-title">#程序员的健康管理#</p>
                    <p class="topic-meta">2.4k 人正在讨论</p>
                </div>
            </div>
        </div>
        
        <!-- 活动提醒 -->
        <div class="sidebar-card">
            <div class="card-header">
                <h3 class="card-title">即将开始的活动</h3>
                <a href="#" class="see-all">全部活动</a>
            </div>
            
            <div class="event-list">
                <div class="event-item">
                    <span class="event-date">今天 19:30</span>
                    <p class="event-title">前端开发者线上交流会</p>
                    <p class="event-details">
                        <i class="fas fa-user"></i> 李明主持 · 
                        <i class="fas fa-users"></i> 248人已报名
                    </p>
                    <button class="join-btn">参加活动</button>
                </div>
                
                <div class="event-item">
                    <span class="event-date">明天 14:00</span>
                    <p class="event-title">产品设计思维工作坊</p>
                    <p class="event-details">
                        <i class="fas fa-user"></i> 张晓明主持 · 
                        <i class="fas fa-users"></i> 156人已报名
                    </p>
                    <button class="join-btn">参加活动</button>
                </div>
            </div>
        </div>
        
        <!-- 互动动态 -->
        <div class="sidebar-card">
            <div class="card-header">
                <h3 class="card-title">互动动态</h3>
                <a href="#" class="see-all">全部动态</a>
            </div>
            
            <div class="activity-feed">
                <div class="activity-item">
                    <img src="https://picsum.photos/id/65/36/36" alt="李婷婷的头像" class="activity-avatar">
                    <div class="activity-content">
                        <p class="activity-text"><a href="#">李婷婷</a> 点赞了你的帖子</p>
                        <p class="activity-time">10分钟前</p>
                    </div>
                </div>
                
                <div class="activity-item">
                    <img src="https://picsum.photos/id/91/36/36" alt="王建国的头像" class="activity-avatar">
                    <div class="activity-content">
                        <p class="activity-text"><a href="#">王建国</a> 评论了你的分享</p>
                        <p class="activity-time">35分钟前</p>
                    </div>
                </div>
                
                <div class="activity-item">
                    <img src="https://picsum.photos/id/26/36/36" alt="陈思思的头像" class="activity-avatar">
                    <div class="activity-content">
                        <p class="activity-text"><a href="#">陈思思</a> 分享了你的文章到她的主页</p>
                        <p class="activity-time">2小时前</p>
                    </div>
                </div>
                
                <div class="activity-item">
                    <img src="https://picsum.photos/id/64/36/36" alt="张晓明的头像" class="activity-avatar">
                    <div class="activity-content">
                        <p class="activity-text"><a href="#">张晓明</a> 关注了你</p>
                        <p class="activity-time">昨天</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 关注按钮交互
            const followButtons = document.querySelectorAll('.follow-btn');
            followButtons.forEach(button => {
                button.addEventListener('click', function() {
                    if (this.classList.contains('following')) {
                        this.classList.remove('following');
                        this.textContent = '关注';
                    } else {
                        this.classList.add('following');
                        this.textContent = '已关注';
                    }
                });
            });
            
            // 热门话题点击效果
            const trendingTopics = document.querySelectorAll('.trending-topic');
            trendingTopics.forEach(topic => {
                topic.addEventListener('click', function() {
                    // 在实际应用中，这里会跳转到话题详情页
                    const topicTitle = this.querySelector('.topic-title').textContent;
                    console.log(`查看话题: ${topicTitle}`);
                });
            });
            
            // 活动参加按钮交互
            const joinButtons = document.querySelectorAll('.join-btn');
            joinButtons.forEach(button => {
                button.addEventListener('click', function() {
                    if (this.textContent === '参加活动') {
                        this.textContent = '已报名';
                        this.style.backgroundColor = '#10B981';
                        
                        // 更新参与人数
                        const eventDetails = this.previousElementSibling;
                        const currentCount = parseInt(eventDetails.textContent.match(/\d+/)[0]);
                        eventDetails.innerHTML = eventDetails.innerHTML.replace(
                            /\d+/, 
                            currentCount + 1
                        );
                    } else {
                        this.textContent = '参加活动';
                        this.style.backgroundColor = '';
                        
                        // 更新参与人数
                        const eventDetails = this.previousElementSibling;
                        const currentCount = parseInt(eventDetails.textContent.match(/\d+/)[0]);
                        eventDetails.innerHTML = eventDetails.innerHTML.replace(
                            /\d+/, 
                            currentCount - 1
                        );
                    }
                });
            });
            
            // 互动动态点击效果
            const activityItems = document.querySelectorAll('.activity-item');
            activityItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 在实际应用中，这里会跳转到相应的互动内容
                    const activityText = this.querySelector('.activity-text').textContent;
                    console.log(`查看互动: ${activityText}`);
                });
            });
        });
    </script>
</body>
</html>
    
